<template>
  <div>
    <el-button type="primary" @click="goTwoSidedNotice" v-show="oneNotification"
      style="float: right; margin-right: 22vh; margin-top: 5vh">查询第二轮面试结果</el-button>
    <center>
      <div id="pdfDom" v-show="oneNotification">
        <span class="tit">通知</span>
        <div class="proBox2">
          <p class="proid">
            <span>编号：</span> <span>{{ registrationForm.id }}</span>
          </p>
          <p class="con" v-if="this.registrationForm.status == 1">
            <span class="con-name">{{ registrationForm.name }}</span>
            同学，恭喜你通过了软件协会第一轮面试。
            请尽快添加软件协会一面通知群，以便后续第二轮笔试的进行。
          </p>
          <img src="../../assets/img/一面通知群.jpg" alt="" class="img" v-if="this.registrationForm.status == 1" />
          <p class="con" v-if="this.registrationForm.status == 2">
            <span class="con-name">{{ registrationForm.name }}</span>
            同学，非常感谢对本协会的关注与支持，很遗憾你没有通过本次面试，
            大学生活还很长，相信你也可以在其它任何地方继续发光发热，我们有缘再会！
          </p>
          <div class="con-unit">
            <p>软件协会</p>
            <p class="time" style="font-size: 13px; color: #0a0a0a">
              2024年10月1号
            </p>
          </div>
          <p class="con-footer">软件协会 监制</p>

          <div class="chapter">
            <canvas id="chapterCanvas" width="150" height="150"></canvas>
          </div>
        </div>
      </div>

      <!--      二面结果-->
      <div id="pdfDom" v-show="twoSidedNotice">
        <div class="proBox">
          <p class="proid">
            <span>编号：</span> <span>{{ registrationForm.id }}</span>
          </p>
          <p class="con" v-if="this.$store.state.isJoin == true && this.deptsName !== ''">
            <span class="con-name">{{ registrationForm.name }}</span>同学
            我们非常高兴地通知您,您成功通过了软件协会的面试和笔试环节!
            🌟您已被我们 <span class="wechat">{{ deptsName }}</span> 部门 录取🌟
            为了确保您能够顺利融入我们的团队，并及时获取后续的工作安排和重要信息，请您尽快添加我们协会会长庄家希的微信：
            📱 庄师兄微信：<span class="wechat">XIH1222</span>
            我们期待与您一起开启这段精彩的旅程，并共同创造更多辉煌的成就！
          </p>
          <p class="con" v-if="this.$store.state.isJoin == false">
            <span class="con-name">{{ registrationForm.name }}</span>&nbsp;同学:<br />
            &nbsp;&nbsp;感谢你对协会的支持！你的大学生活才刚开始，你的才华定会在各领域闪耀。随着协会的发展和你学业的进步，未来合作机会无限。欢迎通过官网继续关注我们的动态：
            <a href="http://baiyunsc.cn" target="_blank"
              style=" text-decoration: none; color: inherit; ">http://baiyunsc.cn</a>。<br>
            &nbsp;&nbsp;再次感谢你的参与，祝你学业有成，未来光明！
          </p>
          <div class="con-unit">
            <p>软件协会</p>
            <p class="time" style="font-size: 13px; color: #0a0a0a">
              2024年10月26号
            </p>
          </div>
          <p class="con-footer">软件协会 监制</p>

          <div class="chapter">
            <canvas id="chapterCanvas2" width="150" height="150"></canvas>
          </div>
        </div>
      </div>
    </center>
  </div>
</template>

<script>
import { getJoinFormByToken } from "../../api/signUp";
import {
  getDeptsByUserId,
  queryDeptsAll,
} from "../../api/departmentalServices/department";
export default {
  data() {
    return {
      registrationForm: {},
      depts: [], //部门信息
      deptsName: "", //录取部门名称
      pageData: null, //接收html格式代码
      isShow: true,
      isCanvas: false,
      downType: true, // false为 pdf , true为图片
      oneNotification: true, //一面通知
      twoSidedNotice: false, //二面通知
    };
  },
  mounted() {
    this.preview();
    this.queryFrom();
    this.getDeptsAll();
  },
  methods: {
    //获取所有部门信息
    getDeptsAll() {
      queryDeptsAll().then((res) => {
        console.log(res);
        if (res.code == 20000) {
          this.depts = res.data.depts;
        }
      });
    },
    //获取录取部门
    queryDetsByUserId() {
      getDeptsByUserId(this.$store.state.userInfo.id).then((res) => {
        if (res.code == 20000) {
          this.depts.forEach((item) => {
            if (item.id == res.data.userDept.deptId) {
              this.deptsName = item.name;
            }
          });
        }
      });
    },

    goTwoSidedNotice() {
      // 创建一个Date对象，表示2024年10月12日12点
      let targetDate = new Date(2024, 9, 26, 18, 0, 0); // 注意月份是从0开始的，所以9代表10月

      // 获取当前日期和时间
      let now = new Date();

      // 比较当前时间是否大于或等于目标时间
      if (now >= targetDate) {
        this.oneNotification = false;
        this.twoSidedNotice = true;
        this.queryDetsByUserId();
      } else {
        this.$message.warning("暂未开放,2024年10月6日18点准时开放");
      }
    },
    queryFrom() {
      getJoinFormByToken().then((res) => {
        if (res.code == 20000 && res.data.joinForm) {
          this.registrationForm = res.data.joinForm;
        } else {
          this.$message.error(res.data.msg);
          this.$router.push("/");
        }
      });
    },
    preview() {
      this.$nextTick(() => {
        if (!this.isCanvas) {
          // 只绘画一次
          this.isCanvas = true;
          this.getChapter();
          this.getChapter2();
        }
      });
    },
    // 生成印章
    getChapter() {
      var canvas = document.getElementById("chapterCanvas");
      var context = canvas.getContext("2d");

      var text = "xxx专用章";
      var companyName = "软件协会";
      //  context.translate(0, 0);
      // context.clearRect(0, 0, 200, 200);//清除整个画布
      // 绘制印章边框
      var width = canvas.width / 2;
      var height = canvas.height / 2;
      context.lineWidth = 3;
      context.strokeStyle = "#cf0c0c";
      context.beginPath();
      context.arc(width, height, 60, 0, Math.PI * 2); //宽、高、半径
      context.stroke();

      //画五角星
      create5star(context, width, height, 15, "#cf0c0c", 0);

      // 绘制印章名称
      context.font = "20px 宋体";
      context.textBaseline = "middle"; //设置文本的垂直对齐方式
      context.textAlign = "center"; //设置文本的水平对对齐方式
      context.lineWidth = 1;
      context.strokeStyle = "#cf0c0c";
      // context.strokeText(text, width, height + 30); // 名称 xx专用章

      // 绘制印章单位
      context.translate(width, height); // 平移到此位置,
      context.font = "20px 宋体";
      var count = companyName.length; // 字数
      var angle = (5 * Math.PI) / (3 * (count - 1)); // 字间角度
      var chars = companyName.split("");
      var c;
      for (var i = 0; i < count; i++) {
        c = chars[i]; // 需要绘制的字符
        if (i == 0) {
          context.rotate((4 * Math.PI) / 6); // 文字起始位置
        } else {
          context.rotate(angle);
        }

        context.save();
        context.translate(45, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
        context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
        context.strokeText(c, 0, 0); // 此点为字的中心点
        context.restore();
      }

      //绘制五角星
      function create5star(context, sx, sy, radius, color, rotato) {
        context.save();
        context.fillStyle = color;
        context.translate(sx, sy); //移动坐标原点
        context.rotate(Math.PI + rotato); //旋转
        context.beginPath(); //创建路径
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = (Math.PI / 5) * 4;
        for (var i = 0; i < 5; i++) {
          //画五角星的五条边
          var x = Math.sin(i * dig);
          var y = Math.cos(i * dig);
          context.lineTo(x * radius, y * radius);
        }
        context.closePath();
        context.stroke();
        context.fill();
        context.restore();
      }
    },
    getChapter2() {
      var canvas = document.getElementById("chapterCanvas2");
      var context = canvas.getContext("2d");

      var text = "xxx专用章";
      var companyName = "软件协会";
      //  context.translate(0, 0);
      // context.clearRect(0, 0, 200, 200);//清除整个画布
      // 绘制印章边框
      var width = canvas.width / 2;
      var height = canvas.height / 2;
      context.lineWidth = 3;
      context.strokeStyle = "#cf0c0c";
      context.beginPath();
      context.arc(width, height, 60, 0, Math.PI * 2); //宽、高、半径
      context.stroke();

      //画五角星
      create5star(context, width, height, 15, "#cf0c0c", 0);

      // 绘制印章名称
      context.font = "20px 宋体";
      context.textBaseline = "middle"; //设置文本的垂直对齐方式
      context.textAlign = "center"; //设置文本的水平对对齐方式
      context.lineWidth = 1;
      context.strokeStyle = "#cf0c0c";
      // context.strokeText(text, width, height + 30); // 名称 xx专用章

      // 绘制印章单位
      context.translate(width, height); // 平移到此位置,
      context.font = "20px 宋体";
      var count = companyName.length; // 字数
      var angle = (5 * Math.PI) / (3 * (count - 1)); // 字间角度
      var chars = companyName.split("");
      var c;
      for (var i = 0; i < count; i++) {
        c = chars[i]; // 需要绘制的字符
        if (i == 0) {
          context.rotate((4 * Math.PI) / 6); // 文字起始位置
        } else {
          context.rotate(angle);
        }

        context.save();
        context.translate(45, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
        context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
        context.strokeText(c, 0, 0); // 此点为字的中心点
        context.restore();
      }

      //绘制五角星
      function create5star(context, sx, sy, radius, color, rotato) {
        context.save();
        context.fillStyle = color;
        context.translate(sx, sy); //移动坐标原点
        context.rotate(Math.PI + rotato); //旋转
        context.beginPath(); //创建路径
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = (Math.PI / 5) * 4;
        for (var i = 0; i < 5; i++) {
          //画五角星的五条边
          var x = Math.sin(i * dig);
          var y = Math.cos(i * dig);
          context.lineTo(x * radius, y * radius);
        }
        context.closePath();
        context.stroke();
        context.fill();
        context.restore();
      }
    },
  },
};
</script>

<style scoped>
::v-deep .el-dialog__body {
  padding: 0px;
  display: flex;
  justify-content: center;
}

#pdfDom {
  /* 要想pdf周边留白，要在这里设置 */
  width: 750px;
}

.proBox {
  background: url("../../assets/img/letterOfAdmission.png") no-repeat;
  background-size: cover;
  width: 790px;
  height: 560px;
  padding: 90px 94px;
  box-sizing: border-box;
  /*margin: 0 auto;*/
  margin-top: 35px;
  position: relative;
  color: #000;
  font-family: SimSun;
}

.proBox2 {
  background: url("../../assets/img/twoSidedNotice.jpg") no-repeat;
  background-size: cover;
  width: 765px;
  height: 560px;
  padding: 90px 94px;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  color: #000;
  font-family: SimSun;
}

.tit {
  color: #cf0c0c;
  font-size: 36px;
  font-weight: 700;
  position: relative;
  top: 72px;
  left: 25px;
  letter-spacing: 20px;
  font-family: SimSun;
  margin: 20px 0;
  z-index: 99;
}

.proid {
  text-align: right;
  font-weight: 500;
  margin-right: -20px;
  /* margin-right: 5px; */
}

.con {
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  margin: 10px 0;
  line-height: 32px;
  text-indent: 2em;
  margin-top: 80px;
}

.con-name {
  font-size: 25px;
  font-family: 华文行楷, STXingkai;
  border-bottom: 2px solid #000;
}

.con-unit {
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  right: 100px;
  bottom: 100px;
  text-align: center;
  letter-spacing: 3px;
}

.con-unit p {
  margin: 5px 0;
}

.con-footer {
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  bottom: 45px;
  left: 0;
  right: 0;
  text-align: center;
}

.chapter {
  border-radius: 50%;
  position: absolute;
  bottom: 45px;
  right: 137px;
}

.wechat {
  text-decoration: underline;
  /* 下划线 */
  font-weight: bold;
  /* 加粗 */
}

.img {
  width: 150px;
  position: relative;
  right: 200px;
}
</style>
